<template>
  <div v-loading="fullscreenLoading" element-loading-text="导出中" class="dashboard-container">
    <el-button class="export-btn" type="primary" @click="exportToPptx">导出PPT</el-button>
    <el-button class="export-pdf-btn" type="primary" @click="exportPDF">导出PDF</el-button>
    <div class="page-box page-container-box">
      <!-- 封面图 -->
      <div class="page-header-title-box">
        <div class="page-header-title-1">临海市第一人民医院</div>
        <div class="page-header-title-2">2025年1-4月</div>
        <div class="page-header-title-3">医保DRG运营分析报告</div>
        <div class="page-header-title-4">医保DRG智能管控</div>
      </div>
      <div class="page-header-title-5">浙江建达科技股份有限公司 @copyright 2025 All rights reserved</div>
      <img src="./img/bj.png" />
    </div>
    <!-- 目录页 -->
    <div class="page-box page-container-box">
      <div class="page-catalogue-box">
        <div class="catalogue-left-side">
          <div class="catalogue-header">
            <h1 class="catalogue-title">目录</h1>
            <div class="catalogue-subtitle">CONTENTS</div>
          </div>
        </div>
        <div class="catalogue-right-side">
          <div class="catalogue-content">
            <div class="catalogue-item" v-for="(item, index) in pageCatalogue" :key="item.id">
              <div class="catalogue-number">
                <span class="number-text">{{ index + 1 < 10 ? '0' + (index + 1) : index + 1 }}</span>
              </div>
              <div class="catalogue-info">
                <div class="catalogue-name">{{ item.catalogue }}</div>
                <div class="catalogue-line"></div>
                <div class="catalogue-pages">{{ item.pageList.length }} 页</div>
              </div>
            </div>
          </div>
        </div>
        <div class="catalogue-decoration">
          <div class="decoration-circle circle-1"></div>
          <div class="decoration-circle circle-2"></div>
          <div class="decoration-circle circle-3"></div>
        </div>
      </div>
    </div>
    <div v-for="(item, index) in pageCatalogue" :key="item.title" class="page-container-box">
      <!-- 目录 -->
      <div class="page-box page-catalogue">
        <div class="page-catalogue-left">
          <div class="page-catalogue-left-box-1">
            <div class="page-catalogue-left-box-2"></div>
            <div class="page-catalogue-left-num">{{ index < 10 ? '0' + (index + 1) : index + 1 }}</div>
          </div>
        </div>
        <div class="page-catalogue-right">
          <div class="page-catalogue-right-catalogue">{{ item.catalogue }}</div>
          <div class="page-catalogue-right-box">
            <div class="page-catalogue-right-box-1"></div>
            <div class="page-catalogue-right-box-2"></div>
          </div>
        </div>
      </div>
      <!-- 页面 -->
      <div class="page-box page-container" v-for="(pageItem, pageIndex) in item.pageList" :key="pageItem.title">
        <div class="page-content-index">{{ index + 1 + '-' + (pageIndex + 1) }}</div>
        <div class="page-header">
          <div class="page-header-mark"></div>
          <div class="page-header-title">
            {{ pageItem.title }}
          </div>
          <div class="page-header-time">
            {{ pageItem.time }}
          </div>
        </div>
        <div class="page-content">
          <!-- 页面类型 -->
          <component
            :is="pageItem.type"
            :ref="pageItem.ref + pageItem.title"
            :data="pageItem.data"
            :chartList1="pageItem.chartList1"
            :chartList2="pageItem.chartList2"
            :chartList3="pageItem.chartList3"
            :chartList4="pageItem.chartList4"
            :tableData1="pageItem.tableData1"
            :tableData2="pageItem.tableData2"
            :desc="pageItem.desc"
            :cardData="pageItem.cardData"
          />
        </div>
      </div>
    </div>
    <!-- 结尾页 -->
    <div class="page-box page-container-box">
      <img src="./img/ending.png" />
    </div>
  </div>
</template>

<script>
import pptxgen from 'pptxgenjs';
import domtoimage from 'dom-to-image';
import jsPDF from 'jspdf';
import text from './text';
import pageType1 from './pageList/pageType1.vue';
import pageType2 from './pageList/pageType2.vue';
import pageType3 from './pageList/pageType3.vue';
import pageType4 from './pageList/pageType4.vue';
import pageType5 from './pageList/pageType5.vue';
import pageType6 from './pageList/pageType6.vue';
import pageType7 from './pageList/pageType7.vue';
import pageType8 from './pageList/pageType8.vue';
import pageType9 from './pageList/pageType9.vue';
import pageType10 from './pageList/pageType10.vue';
import pageType11 from './pageList/pageType11.vue';
import pageType12 from './pageList/pageType12.vue';
import pageType13 from './pageList/pageType13.vue';
import pageType14 from './pageList/pageType14.vue';
import pageType15 from './pageList/pageType15.vue';
import pageType16 from './pageList/pageType16.vue';
import pageType17 from './pageList/pageType17.vue';
import pageType18 from './pageList/pageType18.vue';
export default {
  name: 'Dashboard',
  components: {
    pageType1,
    pageType2,
    pageType3,
    pageType4,
    pageType5,
    pageType6,
    pageType7,
    pageType8,
    pageType9,
    pageType10,
    pageType11,
    pageType12,
    pageType13,
    pageType14,
    pageType15,
    pageType16,
    pageType17,
    pageType18,
  },
  data() {
    return {
      //导出PDF加载
      fullscreenLoading: false,
      // 导出相关
      processedPages: 0,
      // 总页数
      totalPages: 0,
      //目录
      pageCatalogue: [
        {
          catalogue: 'DRG运营状况',
          id: 1,
          pageList: [],
        },
        {
          catalogue: '超支结余分析',
          id: 2,
          pageList: [],
        },
        {
          catalogue: '科室医疗组分析',
          id: 3,
          pageList: [],
        },
        {
          catalogue: '病组结余分析',
          id: 4,
          pageList: [],
        },
        {
          catalogue: '高低倍及异常分析',
          id: 5,
          pageList: [],
        },
        {
          catalogue: '学科发展分析',
          id: 6,
          pageList: [],
        },
      ],
    };
  },
  methods: {
    init() {
      console.log(text, 1111);
      for (const key in text.result) {
        let page = text.result[key];
        this.pageCatalogue.forEach(item => {
          if (item.id === page.id) {
            switch (page.type) {
              case 'pageType1':
                item.pageList.push({
                  type: page.type,
                  ref: page.type,
                  title: key,
                  time: page.time,
                  data: page.data_list,
                  sort: page.sort,
                });
                break;
              case 'pageType2':
                item.pageList.push({
                  type: page.type,
                  ref: page.type,
                  title: key,
                  time: page.time,
                  chartList1: {
                    ...page.chartList1,
                    data: page.data_list,
                  },
                  chartList2: {
                    ...page.chartList2,
                    data: page.data_list,
                  },
                  //卡片数据
                  cardData: page.cardData,
                  desc: page.desc,
                  sort: page.sort,
                });
                break;
              case 'pageType3':
                item.pageList.push({
                  type: page.type,
                  ref: page.type,
                  title: key,
                  time: page.time,
                  chartList1: {
                    ...page.chartList1,
                    data: page.data_list,
                  },
                  //卡片数据
                  cardData: page.cardData,
                  desc: page.desc,
                  sort: page.sort,
                });
                break;
              case 'pageType4':
                item.pageList.push({
                  type: page.type,
                  ref: page.type,
                  title: key,
                  time: page.time,
                  chartList1: {
                    ...page.chartList1,
                    data: page.data_list,
                  },
                  chartList2: {
                    ...page.chartList2,
                    data: page.data_list,
                  },
                  desc: page.desc,
                  sort: page.sort,
                });
                break;
              case 'pageType5':
                let chartList1 = page.data_list2.sort((a, b) => b[page.chartList1.keyList[0]] - a[page.chartList1.keyList[0]]);
                let chartList2 = page.data_list3.sort((a, b) => a[page.chartList2.keyList[0]] - b[page.chartList2.keyList[0]]);
                item.pageList.push({
                  type: page.type,
                  ref: page.type,
                  title: key,
                  time: page.time,
                  tableData1: {
                    ...page.tableData1,
                    data: page.data_list,
                  },
                  chartList1: {
                    ...page.chartList1,
                    data: chartList1,
                  },

                  chartList2: {
                    ...page.chartList2,
                    data: chartList2,
                  },
                  desc: page.desc,
                  sort: page.sort,
                });
                break;
              case 'pageType6':
                item.pageList.push({
                  type: page.type,
                  ref: page.type,
                  title: key,
                  time: page.time,
                  tableData1: {
                    ...page.tableData1,
                    data: page.data_list,
                  },
                  desc: page.desc && page.desc.描述 ? page.desc.描述 : (page.desc ? page.desc : '') + (page.desc1 ? page.desc1 : '') + (page.desc2 ? page.desc2 : ''),
                  sort: page.sort,
                });
                break;
              case 'pageType7':
                // 获取表格数据和图表数据
                let tableDataName = '';
                let chartListName = '';
                for (const keyData in page.data) {
                  if (page.data[keyData].data_list) {
                    //表格key
                    tableDataName = keyData;
                  } else {
                    //图表key
                    chartListName = keyData;
                  }
                }
                item.pageList.push({
                  type: page.type,
                  ref: page.type,
                  title: key,
                  time: page.time,
                  tableData1: {
                    ...page.data[tableDataName].tableData1,
                    data: page.data[tableDataName].data_list,
                  },
                  chartList1: {
                    ...page.data[chartListName].chartList1,
                    data: page.data[chartListName][page.data[chartListName].chartList1.title],
                  },
                  chartList2: {
                    ...page.data[chartListName].chartList2,
                    data: page.data[chartListName][page.data[chartListName].chartList2.title],
                  },
                  chartList3: {
                    ...page.data[chartListName].chartList3,
                    data: page.data[chartListName][page.data[chartListName].chartList3.title],
                  },
                  desc: page.desc,
                  sort: page.sort,
                });
                break;
              case 'pageType8':
                item.pageList.push({
                  type: page.type,
                  ref: page.type,
                  title: key,
                  tableData1: {
                    ...page.tableData1,
                    data: page.data_list,
                  },
                  time: page.time,
                  sort: page.sort,
                });
                break;
              case 'pageType9':
                item.pageList.push({
                  type: page.type,
                  ref: page.type,
                  title: key,
                  tableData1: {
                    ...page,
                    ...page.tableData1,
                    data: page.data_list,
                  },
                  time: page.time,
                  desc: page.desc,
                  sort: page.sort,
                });
                break;
              case 'pageType10':
                item.pageList.push({
                  type: page.type,
                  ref: page.type,
                  title: key,
                  time: page.time,
                  tableData1: {
                    ...page.tableData1,
                    data: page.data_list,
                  },
                  chartList1: {
                    ...page.chartList1,
                    data: page.data_list,
                  },
                  chartList2: {
                    ...page.chartList2,
                    data: page.data_list,
                  },
                  desc: page.desc,
                  sort: page.sort,
                });
                break;
              case 'pageType11':
                item.pageList.push({
                  type: page.type,
                  ref: page.type,
                  title: key,
                  time: page.time,
                  tableData1: {
                    ...page.tableData1,
                    data: [page.data_list],
                  },
                  tableData2: {
                    ...page.tableData2,
                    data: page.data_list2,
                  },
                  desc: (page.desc ? page.desc : '') + (page.desc1 ? page.desc1 : '') + (page.desc2 ? page.desc2 : ''),
                  sort: page.sort,
                });
                break;
              case 'pageType12':
                if (page.data_list.length == null) {
                  let data_list = [];
                  // 获取所有类别（如"中药费"、"其他费"等）
                  const categories = Object.keys(page.data_list[Object.keys(page.data_list)[0]][0]);

                  // 获取所有数据项名称（如"AH28有创呼吸机支持≥96小时，耐药诊断费用构成"等）
                  const dataKeys = Object.keys(page.data_list);

                  // 转换数据格式
                  data_list = categories.map(category => {
                    const item = { [page.chartList1.XShow]: category };
                    dataKeys.forEach(key => {
                      // 为每个数据项名称添加对应的值
                      item[key] = page.data_list[key][0][category];
                    });
                    return item;
                  });
                  page.data_list = data_list;
                }
                item.pageList.push({
                  type: page.type,
                  ref: page.type,
                  title: key,
                  time: page.time,
                  chartList1: {
                    ...page.chartList1,
                    data: page.data_list,
                  },
                  tableData1: {
                    ...page.tableData1,
                    data: page.data_list,
                  },
                  desc: (page.desc ? page.desc : '') + (page.desc1 ? page.desc1 : '') + (page.desc2 ? page.desc2 : ''),
                  sort: page.sort,
                });
                break;
              case 'pageType13':
                item.pageList.push({
                  type: page.type,
                  ref: page.type,
                  title: key,
                  time: page.time,
                  chartList1: {
                    ...page.chartList1,
                    data: page.data_list,
                  },
                  desc: page.desc,
                  sort: page.sort,
                });
                break;
              case 'pageType14':
                item.pageList.push({
                  type: page.type,
                  ref: page.type,
                  title: key,
                  time: page.time,
                  desc: page.desc,
                  sort: page.sort,
                });
                break;
              case 'pageType15':
                item.pageList.push({
                  type: page.type,
                  ref: page.type,
                  title: key,
                  time: page.time,
                  chartList1: {
                    ...page.chartList1,
                    data: page.data_list,
                  },
                  tableData1: {
                    ...page.tableData1,
                    data: page.data_list,
                  },
                  //卡片数据
                  cardData: page.cardData,
                  desc: page.desc,
                  sort: page.sort,
                });
                break;
              case 'pageType16':
                let data_list_copy1 = JSON.parse(JSON.stringify(page.data_list));
                let data_list_copy2 = JSON.parse(JSON.stringify(page.data_list));
                let pageType16_chartList1 = data_list_copy1.sort((a, b) => a[page.chartList1.keyList[0]] - b[page.chartList1.keyList[0]]);
                let pageType16_tableData1 = data_list_copy2.sort((a, b) => b[page.chartList1.keyList[0]] - a[page.chartList1.keyList[0]]);
                item.pageList.push({
                  type: page.type,
                  ref: page.type,
                  title: key,
                  time: page.time,
                  chartList1: {
                    ...page.chartList1,
                    data: pageType16_chartList1,
                  },
                  tableData1: {
                    ...page.tableData1,
                    data: pageType16_tableData1,
                  },
                  desc: typeof page.desc === 'string' ? (page.desc ? page.desc : '') + (page.desc1 ? page.desc1 : '') + (page.desc2 ? page.desc2 : '') : '',
                  sort: page.sort,
                });
                break;
              case 'pageType17':
                item.pageList.push({
                  type: page.type,
                  ref: page.type,
                  title: key,
                  time: page.time,
                  chartList1: {
                    ...page.chartList1,
                    data: page.data_list,
                  },
                  tableData1: {
                    ...page.tableData1,
                    data: page.data_list,
                  },
                  desc: typeof page.desc === 'string' ? (page.desc ? page.desc : '') + (page.desc1 ? page.desc1 : '') + (page.desc2 ? page.desc2 : '') : '',
                  sort: page.sort,
                });
                break;
              case 'pageType18':
                let pageType18_data_list = {};
                let pageType18_data_listIndex = 0;
                for (const key in page.data_list) {
                  pageType18_data_listIndex++;
                  const element = page.data_list[key];
                  pageType18_data_list[key] = [];
                  for (const key2 in element) {
                    pageType18_data_list[key].push({
                      [page['chartList' + pageType18_data_listIndex].XShow]: key2,
                      [page['chartList' + pageType18_data_listIndex].keyList[0]]: element[key2].toFixed(2),
                    });
                  }
                }
                item.pageList.push({
                  type: page.type,
                  ref: page.type,
                  title: key,
                  time: page.time,
                  chartList1: {
                    ...page.chartList1,
                    data: Object.values(pageType18_data_list)[0],
                  },
                  chartList2: {
                    ...page.chartList2,
                    data: Object.values(pageType18_data_list)[1],
                  },
                  chartList3: {
                    ...page.chartList3,
                    data: Object.values(pageType18_data_list)[2],
                  },
                  chartList4: {
                    ...page.chartList4,
                    data: Object.values(pageType18_data_list)[3],
                  },
                  desc: page.desc,
                  sort: page.sort,
                });
                break;
            }
          }
          item.pageList.sort((a, b) => a.sort - b.sort);
        });
      }
    },
    /**
     * 计算文本块的宽度（中文字=0.4，英文字=0.2，数字=0.2）
     * @param {string} text - 要计算的文本
     * @returns {number} - 计算后的总宽度
     */
    calculateTextWidth(text) {
      let totalWidth = 0;
      for (const char of text) {
        if (/[\u4e00-\u9fa5]/.test(char)) {
          // 中文字符
          totalWidth += 0.4;
        } else if (/[a-zA-Z]/.test(char)) {
          // 英文字符
          totalWidth += 0.2;
        } else if (/[0-9]/.test(char)) {
          // 数字
          totalWidth += 0.2;
        } else {
          // 其他字符（如标点符号），默认按英文字母宽度计算
          totalWidth += 0.2;
        }
      }
      return totalWidth;
    },

    /**
     * 导出为PPT
     * @description 将所有图表导出为PPT文件，使用各组件内置的PPT导出配置
     */
    async exportToPptx() {
      const pptx = new pptxgen();

      try {
        // 生成第一页的图片
        const originalImageData = await this.exportSinglePageImage(0);
        const originalSlide = pptx.addSlide();
        originalSlide.addImage({ x: 0, y: 0, w: '100%', h: '100%', path: originalImageData });
        //生成目录页
        const catalogueImageData = await this.exportSinglePageImage(1);
        const catalogueSlide = pptx.addSlide();
        catalogueSlide.addImage({ x: 0, y: 0, w: '100%', h: '100%', path: catalogueImageData });
        // 遍历目录
        this.pageCatalogue.forEach((page, index) => {
          //ppt目录页面生成
          const catalogueSlide = pptx.addSlide();
          //淡蓝色蓝色背景卡片
          catalogueSlide.addShape(pptx.shapes.ROUNDED_RECTANGLE, {
            x: 1,
            y: 1.8,
            w: 2,
            h: 2,
            rectRadius: 0.4,
            fill: { color: 'dae3f5' },
          });
          //深蓝色背景卡片
          catalogueSlide.addShape(pptx.shapes.ROUNDED_RECTANGLE, {
            x: 1,
            y: 1.8,
            w: 2,
            h: 2,
            rotate: 70,
            rectRadius: 0.4,
            fill: { color: '4874cb' },
          });
          // 目录数字
          catalogueSlide.addText([{ text: index < 10 ? '0' + (index + 1) : index + 1 }], { x: 1.45, y: 2.75, color: 'FFFFFF', fontSize: 70, bold: true });
          // 目录文字
          catalogueSlide.addText([{ text: page.catalogue }], {
            x: 3.8,
            y: 2.7,
            fontSize: 50,
            color: '4874cb',
            bold: true,
          });
          //块1的x坐标
          let x1 = 3.7;
          //块1
          catalogueSlide.addText([{ text: '' }], {
            x: x1,
            y: 3.2,
            w: this.calculateTextWidth(page.catalogue),
            h: 0.15,
            fill: { color: 'f5b482' },
            fontSize: 50,
            bold: true,
          });
          //块2
          catalogueSlide.addText([{ text: '' }], {
            x: x1 + this.calculateTextWidth(page.catalogue),
            y: 3.2,
            w: this.calculateTextWidth(page.catalogue),
            h: 0.15,
            fill: { color: 'dae3f5' },
            fontSize: 50,
            bold: true,
          });
          // 遍历页面
          page.pageList.forEach(pageItem => {
            if (this.$refs[pageItem.ref + pageItem.title]) {
              //ppt页面生成
              const pageSlide = pptx.addSlide();
              // 添加标题(标题+时间)
              pageSlide.addText([{ text: pageItem.title }, { text: ' ' }, { text: pageItem.time, options: { color: '000000', bold: true } }], { x: 0.2, y: 0, h: 0.77, color: '4874cb', bold: true });
              // 添加背景
              pageSlide.addText('', { x: 0.15, y: 0.2, w: 0.1, h: 0.4, color: '4874cb', fill: { color: '4874cb' } });
              this.$refs[pageItem.ref + pageItem.title][0].exportToPPT(pptx, pageSlide);
            }
          });
        });
        //结尾页
        const endImageData = await this.exportSinglePageImage(document.querySelectorAll('.page-box').length - 1);
        const endSlide = pptx.addSlide();
        endSlide.addImage({ x: 0, y: 0, w: '100%', h: '100%', path: endImageData });
        // 导出文件
        pptx.writeFile({ fileName: 'test.pptx' });
      } catch (error) {
        console.error('导出PPT时发生错误:', error);
      }
    },
    //单独生成某一页面的图片
    exportSinglePageImage(pageIndex) {
      const pageElements = document.querySelectorAll('.page-box');
      const pageElement = pageElements[pageIndex];
      const imageData = domtoimage.toJpeg(pageElement, { quality: 1, bgcolor: '#fff', width: 1920, height: 1080 });
      return imageData;
    },
    // 导出PDF
    exportPDF() {
      this.fullscreenLoading = true;
      // 获取所有页面元素
      const pageElements = document.querySelectorAll('.page-box');
      this.totalPages = pageElements.length;
      // 使用1920×1080尺寸，与原页面保持一致
      const pdf = new jsPDF('landscape', 'mm', [1080, 1920]);

      // 页面计数器
      this.processedPages = 0;

      // 处理每个页面
      const processPage = index => {
        if (index >= this.totalPages) {
          // 所有页面处理完成，保存PDF
          pdf.save('pdf');
          this.fullscreenLoading = false;
          return;
        }

        // 当前页面元素
        const pageElement = pageElements[index];

        // 确保页面可见以便截图
        pageElement.scrollIntoView();

        // 转换为图像 - 使用原始尺寸1920×1080
        domtoimage
          .toJpeg(pageElement, {
            quality: 1,
            bgcolor: '#fff',
            width: 1920,
            height: 1080,
          })
          .then(imageData => {
            // 不是第一页时添加新页
            if (index > 0) {
              pdf.addPage();
            }
            // 添加图像到PDF - 使用固定尺寸1920×1080
            pdf.addImage(imageData, 'JPEG', 0, 0, 1920, 1080);

            // 处理下一页
            this.processedPages++;
            this.$nextTick(() => {
              processPage(index + 1);
            });
          })
          .catch(error => {
            console.error('导出页面错误:', error, '页码:', index);
            // 尽管错误，继续处理下一页
            this.processedPages++;
            this.$nextTick(() => {
              processPage(index + 1);
            });
          });
      };

      // 开始处理第一页
      this.$nextTick(() => {
        // 延迟一小段时间开始处理，确保UI更新
        setTimeout(() => {
          processPage(0);
        }, 500);
      });
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style lang="less" scoped>
.dashboard-container {
  width: 1920px;

  .export-btn {
    position: fixed;
    top: 2%;
    right: 2%;
    z-index: 1000;
  }

  .export-pdf-btn {
    position: fixed;
    top: 2%;
    right: 8%;
    z-index: 1000;
  }
  .page-header-title-box {
    padding: 50px;
    position: absolute;
    top: 186px;
    width: 1130px;
    height: 592px;
    .page-header-title-1 {
      font-size: 40px;
      color: #ffffff73;
    }
    .page-header-title-2 {
      font-size: 100px;
      color: #fff;
      font-weight: bold;
    }
    .page-header-title-3 {
      margin: 0 0 10px 0;
      font-size: 80px;
      line-height: 95px;
      color: #fff;
    }
    .page-header-title-4 {
      padding: 10px 40px;
      width: fit-content;
      font-size: 60px;
      color: #3377f2;
      background: linear-gradient(to left, #b0cffa, #ffffff);
      border-radius: 60px;
    }
  }
  .page-header-title-5 {
    position: absolute;
    bottom: 180px;
    left: 100px;
    font-size: 20px;
    color: #a0a5c4;
  }

  .page-container-box {
    position: relative;
    width: 100%;
    .page-catalogue-box {
      position: relative;
      height: 1080px;
      background: linear-gradient(135deg, #3886f3 0%, #2c5aa0 100%);
      display: flex;
      overflow: hidden;

      .catalogue-left-side {
        width: 30%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;

        .catalogue-header {
          text-align: center;

          .catalogue-title {
            font-size: 150px;
            font-weight: bold;
            color: #ffffff;
            margin: 0 0 30px 0;
            text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            letter-spacing: 12px;
          }

          .catalogue-subtitle {
            font-size: 42px;
            color: #87ceeb;
            opacity: 0.9;
            font-weight: 300;
            letter-spacing: 16px;
          }
        }
      }

      .catalogue-right-side {
        width: 70%;
        display: flex;
        align-items: center;
        padding: 40px 60px 40px 0;
        z-index: 2;

        .catalogue-content {
          width: 100%;
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 30px;
          align-content: center;

          .catalogue-item {
            display: flex;
            align-items: center;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(15px);
            border-radius: 20px;
            padding: 30px 35px;
            border: 1px solid rgba(135, 206, 250, 0.3);
            transition: all 0.3s ease;
            box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
            min-height: 90px;

            &:hover {
              transform: translateY(-5px);
              background: rgba(135, 206, 250, 0.15);
              box-shadow: 0 12px 32px rgba(72, 116, 203, 0.3);
            }

            .catalogue-number {
              width: 65px;
              height: 65px;
              background: linear-gradient(to left, #b0cffa, #ffffff);
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 25px;
              box-shadow: 0 4px 15px rgba(72, 116, 203, 0.4);
              flex-shrink: 0;

              .number-text {
                font-size: 28px;
                font-weight: bold;
                color: #3377f2;
              }
            }

            .catalogue-info {
              flex: 1;
              display: flex;
              align-items: center;
              min-width: 0;

              .catalogue-name {
                font-size: 38px;
                font-weight: bold;
                color: #ffffff;
                margin-right: 20px;
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
                line-height: 1.2;
                flex-shrink: 1;
              }

              .catalogue-line {
                flex: 1;
                height: 3px;
                background: linear-gradient(to right, rgba(135, 206, 250, 0.8), rgba(135, 206, 250, 0.2));
                margin: 0 20px;
                border-radius: 2px;
                min-width: 40px;
              }

              .catalogue-pages {
                font-size: 26px;
                color: #ffffff;
                opacity: 0.9;
                font-weight: 500;
                background: rgba(135, 206, 250, 0.15);
                padding: 8px 18px;
                border-radius: 12px;
                border: 1px solid rgba(135, 206, 250, 0.3);
                flex-shrink: 0;
                white-space: nowrap;
              }
            }
          }
        }
      }

      .catalogue-decoration {
        position: absolute;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1;

        .decoration-circle {
          position: absolute;
          border-radius: 50%;
          background: rgba(135, 206, 250, 0.1);

          &.circle-1 {
            width: 200px;
            height: 200px;
            top: 10%;
            right: 15%;
            animation: float 6s ease-in-out infinite;
          }

          &.circle-2 {
            width: 150px;
            height: 150px;
            bottom: 15%;
            left: 10%;
            animation: float 8s ease-in-out infinite reverse;
          }

          &.circle-3 {
            width: 100px;
            height: 100px;
            top: 60%;
            right: 8%;
            animation: float 4s ease-in-out infinite;
          }
        }
      }

      @keyframes float {
        0%,
        100% {
          transform: translateY(0px);
        }
        50% {
          transform: translateY(-20px);
        }
      }
    }
    .page-catalogue {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
      height: 1080px;

      .page-catalogue-left {
        padding-left: 300px;

        .page-catalogue-left-box-1 {
          position: relative;
          width: 300px;
          height: 300px;
          background-color: #dae3f5;
          border-radius: 40px;
        }

        .page-catalogue-left-box-2 {
          width: 300px;
          height: 300px;
          background-color: #4874cb;
          border-radius: 40px;
          // 旋转
          transform: rotate(70deg);
        }

        .page-catalogue-left-num {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 120px;
          font-weight: bold;
          color: #fff;
        }
      }

      .page-catalogue-right {
        margin-left: 100px;
        font-size: 100px;
        font-weight: bold;
        color: #4874cb;

        .page-catalogue-right-box {
          margin-top: 20px;
          display: flex;

          .page-catalogue-right-box-1 {
            width: 50%;
            height: 20px;
            background-color: #f5b482;
          }

          .page-catalogue-right-box-2 {
            width: 50%;
            height: 20px;
            background-color: #dae3f5;
          }
        }
      }
    }

    .page-container {
      position: relative;
      width: 100%;

      .page-content-index {
        position: absolute;
        top: 54px;
        right: 0;
        transform: translateY(-50%);
        font-size: 3rem;
        font-weight: bold;
        color: #4874cb;
      }
      .page-header {
        display: flex;
        align-items: center;
        padding-left: 20px;
        width: 100%;
        height: 108px;
        line-height: 108px;
        font-size: 3rem;
        font-weight: bold;

        .page-header-mark {
          margin-right: 10px;
          width: 20px;
          height: 70%;
          background-color: #4874cb;
        }

        .page-header-title {
          color: #4874cb;
        }

        .page-header-time {
          margin-left: 10px;
          font-size: 3rem;
          font-weight: bold;
        }
      }

      .page-content {
        padding: 0 20px 20px 20px;
        width: 100%;
        height: calc(1080px - 108px);
      }
    }
  }
}
</style>
